Google Charts API ব্যবহার করে আপনি আপনার চার্টে Custom Events যোগ করতে পারেন, যা চার্টের সাথে ইউজারের ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে। আপনি যেমন, চার্টের উপরে ক্লিক, হোভার ইভেন্ট, সিলেকশন ইভেন্ট ইত্যাদি ব্যবহার করতে পারেন।

এখানে আমরা দেখব কিভাবে Custom Events যোগ করতে হয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে হয়।

Step 1: Angular প্রজেক্ট এবং লাইব্রেরি ইন্সটল করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new interactive-charts
cd interactive-charts

এখন angular-google-charts লাইব্রেরি ইন্সটল করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts প্যাকেজটি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Custom Event এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করা

এখন আমরা একটি Pie Chart তৈরি করব এবং তাতে Custom Event যোগ করব, যেমন ইউজার যখন চার্টের অংশে ক্লিক করবে, তখন একটি নির্দিষ্ট মেসেজ প্রদর্শিত হবে।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Interactive Google Charts';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400
  };

  // Custom event function
  onChartClick(event: any) {
    alert(`You clicked on: ${event.chart.getSelection()[0]?.row}`);
  }

  // Function to handle events when chart is ready
  onChartReady() {
    console.log('Chart is ready to use');
  }
}

এখানে, আমরা একটি Pie Chart তৈরি করেছি এবং onChartClick নামে একটি Custom Event ফাংশন তৈরি করেছি যা ইউজার যখন চার্টের কোন অংশে ক্লিক করবে, তখন একটি এলার্ট দেখাবে এবং ক্লিক করা সেগমেন্টের তথ্য প্রদর্শন করবে।

Step 4: HTML ফাইলে ইন্টারঅ্যাকটিভ চার্ট রেন্ডার করা

এখন, app.component.html ফাইলে আমরা google-chart কম্পোনেন্ট ব্যবহার করে চার্ট রেন্ডার করব এবং Custom Event-এর জন্য ইভেন্ট হ্যান্ডলার যোগ করব।

app.component.html:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  (chartReady)="onChartReady()" 
  (chartSelect)="onChartClick($event)">
</google-chart>

এখানে:

• chartReady: এটি চার্ট রেন্ডার হওয়ার পরে কল হবে।
• chartSelect: এটি ইউজার যখন চার্টের কোনও অংশে ক্লিক করবে, তখন কল হবে এবং আমরা সেই ইভেন্টকে onChartClick ফাংশনে পাঠাব।

Step 5: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Pie Chart দেখতে পাবেন এবং চার্টের কোন অংশে ক্লিক করলে এলার্ট দেখাবে, যা সেগমেন্টের উপর নির্ভর করবে।

Custom Events এর অন্যান্য উদাহরণ

Google Charts API তে Custom Events এর মাধ্যমে আপনি আরও বিভিন্ন ধরনের ইন্টারঅ্যাকশন যোগ করতে পারেন, যেমন:

1. Selection Event (সিলেকশন ইভেন্ট)

চার্টের উপর ক্লিক করার সময় সিলেক্টেড এলিমেন্টের তথ্য দেখতে চান, তখন chartSelect ইভেন্ট ব্যবহার করা হয়।

onChartClick(event: any) {
  const selection = event.chart.getSelection();
  if (selection.length > 0) {
    const item = selection[0];
    alert(`You selected: ${this.chartData[item.row][0]}`);
  }
}

2. Mouseover Event (মাউসওভার ইভেন্ট)

চার্টের উপরে মাউস হোভার করলে কোন ইনফরমেশন বা টুলটিপ প্রদর্শন করতে পারেন।

onMouseOver(event: any) {
  const row = event.chart.getSelection()[0]?.row;
  alert(`You hovered over: ${this.chartData[row][0]}`);
}

সারাংশ

Custom Events এবং Interactive Charts এর মাধ্যমে আপনি Google Charts-এ ইন্টারঅ্যাকশন এবং ইউজার ইভেন্ট পরিচালনা করতে পারেন। আপনি যেমন, chartSelect (ক্লিক ইভেন্ট), chartReady (চার্ট রেডি হওয়ার ইভেন্ট) ইত্যাদি ব্যবহার করে বিভিন্ন ধরনের ইন্টারঅ্যাকশন যুক্ত করতে পারেন। এই ইভেন্টগুলি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে, যেখানে আপনি ইউজারের ইন্টারঅ্যাকশন অনুসারে চার্টে ডেটা বা ইনফরমেশন প্রদর্শন করতে পারবেন।